/**
 * 全局样式变量
 */

/* 
 * 主题颜色 - 会被theme.ts中的动态设置覆盖
 * 这里作为默认值和IDE提示
 */
:root {
  /* 黑夜模式 */
  --night-backgroup-color: #070f20;
  --night-color: #fff;

  /* 白天模式 */
  --day-backgroup-color: #eef2ff;
  --day-color: #0a2540;

  /* 主色 */
  --primary-color: #a43333;
  --primary-color-light: #fff;
  --primary-color-dark: #0a2540;

  /* 主背景色 */
  --primary-bg-color: #070f20;
  --primary-bg-color-light: #070f20;
  --primary-bg-color-dark: #eef2ff;

  /* 浅色背景 - 用于页面、卡片等浅色背景场景 */
  --color-background-light: #d72dc1;
  --color-background-lighter: #fafbfc; /* 更浅色背景，用于高亮或悬浮状态 */
  --color-background-dark: #f2f3f5; /* 深色背景，用于次级内容区域 */
  --color-background-darker: #e5e6eb; /* 更深色背景，用于特殊强调区域 */
  --color-background-mask: rgba(0, 0, 0, 0.45); /* 遮罩层背景色 */
  /* 功能色 - 用于表示不同的系统状态 */
  --success-color: #0fc6c2; /* 成功状态 */
  --warning-color: #ff7d00; /* 警告状态 */
  --danger-color: #f5222d; /* 危险状态 */
  --info-color: #86909c; /* 信息提示状态 */

  /* 文字颜色 - 不同层级的文本颜色 */
  --text-primary: #fafbfe; /* 主要文字，标题等 */
  --text-regular: #c7c8ca; /* 常规文本内容 */
  --text-secondary: #86909c; /* 次要信息，描述文本 */
  --text-placeholder: #c9cdd4; /* 占位符文本 */
  --text-inverse: #ffffff; /* 反色文本，用于深色背景 */

  /* 按钮颜色 - 不同层级的文本颜色 */
  --btn-primary: rgb(108, 31, 185); /* 主要按钮 */

    /* modal 按钮颜色 */
  --modal-btn-primary: rgb(108, 31, 185); /* 确定按钮 */
  --modal-btn-primary-text: #fff; /* 确定按钮文字颜色 */
  --modal-btn-primary-border: #fff; /* 确定按钮边框颜色 */
  --modal-btn-primary-bg: rgb(108, 31, 185); /* 确定按钮背景颜色 */
  // 取消按钮
  --modal-btn-cancel: #fff; /* 取消按钮文字颜色 */
  --modal-btn-cancel-border: #fff; /* 取消按钮边框颜色 */
  --modal-btn-cancel-bg: #202938; /* 取消按钮背景颜色 */
  --modal-btn-cancel-text: #fff; /* 取消按钮文字颜色 */



  /* 自定义操作按钮 */
  --custom-button-primary: #409eff; /* 主按钮背景色：蓝色，常用于主要操作按钮 */
  --custom-button-edit: #67c23a; /* 编辑按钮背景色：绿色，常用于编辑、确认等操作 */
  --custom-button-error: #f56c6c; /* 错误按钮背景色：红色，常用于删除、警告等操作 */
  --custom-button-text: #fff; /* 按钮文字颜色：白色，适用于深色背景按钮的文字 */

  /* 选中的颜色 - 交互状态 包括 开关 标签选中 */
  --text-active-primary: rgb(108, 31, 185); /* 主要文字，标题等 */

  /* 边框颜色 - 用于分割线和边框 */
  --border-color: rgb(195, 195, 195); /* 标准边框颜色 */
  --border-color-secondary: rgb(172, 171, 171, 0.2); /* 次要边框颜色 */
  --border-active-color: rgb(108, 31, 185); /* 选中的边框颜色 */
  --border-light: #f2f3f5; /* 浅色边框，用于分割线 */

  /* 背景颜色 - 页面和组件背景 */
  --bg-white: #ffffff; /* 纯白背景 */
  --bg-light: #f2f3f5; /* 浅灰背景，用于卡片等 */
  --bg-gray: #f7f8fa; /* 灰色背景，用于页面底色 */
}

/**
 * 主题相关的通用类
 */

/* 主色文本 */
.text-primary {
  color: var(--primary-color) !important;
}

/* 主色背景 */
.bg-primary {
  color: #fff;
  background-color: var(--primary-bg-color) !important;
}

/* 主色边框 */
.border-primary {
  border-color: var(--primary-color) !important;
}

/* 主色按钮样式 */
.btn-primary {
  color: #fff;
  background-color: var(--primary-bg-color);
  border: none;
  border-radius: 8rpx;
  transition: opacity 0.3s;

  &:active {
    opacity: 0.8;
  }
}

/* 圆角按钮 */
.btn-rounded {
  border-radius: 45rpx !important;
}

/* 次级按钮 */
.btn-secondary {
  color: var(--primary-color);
  background-color: #fff;
  border: 1px solid var(--primary-color);
  border-radius: 8rpx;
  transition: background-color 0.3s;

  &:active {
    background-color: rgba(22, 93, 255, 0.05);
  }
}

/**
 * 字体大小
 */
.font-xs {
  font-size: 24rpx;
}

.font-sm {
  font-size: 28rpx;
}

.font-md {
  font-size: 32rpx;
}

.font-lg {
  font-size: 36rpx;
}

.font-xl {
  font-size: 40rpx;
}

/**
 * 边距辅助类
 */
.mt-10 {
  margin-top: 10rpx;
}
.mt-20 {
  margin-top: 20rpx;
}
.mt-30 {
  margin-top: 30rpx;
}
.mt-40 {
  margin-top: 40rpx;
}

.mb-10 {
  margin-bottom: 10rpx;
}
.mb-20 {
  margin-bottom: 20rpx;
}
.mb-30 {
  margin-bottom: 30rpx;
}
.mb-40 {
  margin-bottom: 40rpx;
}

.ml-10 {
  margin-left: 10rpx;
}
.ml-20 {
  margin-left: 20rpx;
}
.ml-30 {
  margin-left: 30rpx;
}
.ml-40 {
  margin-left: 40rpx;
}

.mr-10 {
  margin-right: 10rpx;
}
.mr-20 {
  margin-right: 20rpx;
}
.mr-30 {
  margin-right: 30rpx;
}
.mr-40 {
  margin-right: 40rpx;
}

.p-10 {
  padding: 10rpx;
}
.p-20 {
  padding: 20rpx;
}
.p-30 {
  padding: 30rpx;
}
.p-40 {
  padding: 40rpx;
}

/**
 * 布局辅助类
 */
.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-column {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}

/**
 * 其他辅助类
 */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.rounded-sm {
  border-radius: 4rpx;
}
.rounded {
  border-radius: 8rpx;
}
.rounded-lg {
  border-radius: 16rpx;
}
.rounded-xl {
  border-radius: 24rpx;
}
.rounded-full {
  border-radius: 9999rpx;
}
